@keyframes scale {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

@keyframes circle {
  0% {
    transform: rotateX(70deg) rotateZ(0);
  }
  100% {
    transform: rotateX(70deg) rotateZ(360deg);
  }
}

@keyframes tier {
  0% {
    transform: rotateY(0deg) rotateZ(0);
  }
  100% {
    transform: rotateY(360deg) rotateZ(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(60%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes rotate {
  0% {
    transform: translateY(-50%) rotateY(0);
  }
  100% {
    transform: translateY(-50%) rotateY(360deg);
  }
}
@keyframes arrow1 {
  0% {
    opacity: 0.2;
    left: 0%;
  }
  100% {
    opacity: 1;
    left: 10%;
  }
}
@keyframes arrow2 {
  0% {
    opacity: 0.2;
    right: 0%;
  }
  100% {
    opacity: 1;
    right: 10%;
  }
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes show1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes show2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes show3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.75;
  }
}
@keyframes show4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes flip{
  35%{
    transform: rotateX(360deg);
  }
  100%{
    transform: rotatex(360deg);
  }
}
@keyframes scrolleffect {
  0% {
    transfrom: rotate(0deg);
  }
  25% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  75% {
    transform: rotate(-270deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes scrolleffectClockwise {
  0% {
    transfrom: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateX {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes row{
  0%{}
  100%{
    transform: translateY(-24vh);
    display: none;
  }
  //from { top: 0; }
  //to { top: -24vh }
  //1、list_data = list + list(前几条=父级div_height/item_height)
  //2、keyframes-transform = list.length * item_height
}
.marquee {
  animation: row 10s linear infinite;
  position: relative;
}
/*鼠标划入 停止动画  */
.marquee:hover {
  animation-play-state: paused;
}

@keyframes rowStep{
  0%{}
  7%, 12.5%{ transform: translateY(-3vh);}
  20%,25%{ transform: translateY(-6vh);}
  35%,37.5%{ transform: translateY(-9vh);}
  45%,50%{ transform: translateY(-12vh);}
  58%,62.5%{ transform: translateY(-15vh);}
  70%,75%{ transform: translateY(-18vh);}
  82%,87.5%{ transform: translateY(-21vh);}
  95%,100%{ transform: translateY(-24vh);}
}
.marqueeStep {
  /* //infinite永久调用动画 */
  animation: rowStep 15s ease-out 0s infinite normal forwards;
  position: relative;
}
/*鼠标划入 停止动画  */
.marquee1:hover {
  animation-play-state: paused;
}

.delay0 {
  animation-delay: 0ms !important;
}

.delay100 {
  animation-delay: 100ms !important;
}

.delay200 {
  animation-delay: 200ms !important;
}

.delay300 {
  animation-delay: 300ms !important;
}

.delay400 {
  animation-delay: 400ms !important;
}

.delay500 {
  animation-delay: 500ms !important;
}

.delay1000 {
  animation-delay: 1000ms !important;
}

.delay2000 {
  animation-delay: 2000ms !important;
}

.delay3000 {
  animation-delay: 3000ms !important;
}

.delay4000 {
  animation-delay: 4000ms !important;
}

.delay5000 {
  animation-delay: 5000ms !important;
}

.chartMap {
  opacity: 0;
  animation: sale 1s linear forwards 0.5s;
}

@keyframes sale {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 60px, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
